import React, {useState} from 'react';
import {Card, Image, PageHeader} from 'antd';
import {findByBackShowId, findByGoodsAngent} from '@/services/ant-design-pro/goods';
import {getResult} from '@/services/ant-design-pro/attribute';
import {useMount} from 'ahooks';
import '../editor.less';
import BraftEditor, {EditorState} from 'braft-editor';
import {ContentUtils} from 'braft-utils';

import {useLocation} from 'umi';
import ProDescriptions from '@ant-design/pro-descriptions';
import parse from 'html-react-parser';
import ProTable from '@ant-design/pro-table';

const initValue = {
  name: '',
  imageId: 0,
};
const columns = [
  {
    title: '图片',
    key: 'image',
    span: 4,
    dataIndex: 'image',
    render: (dom, entity, index, action) => {
      if (dom !== undefined) {
        return <Image src={dom} width={100} height={100}></Image>;
      }
    },
  },
  {
    title: '商品名称',
    key: 'name',
    dataIndex: 'name',
  },
  {
    title: '维语名称',
    key: 'nameUg',
    dataIndex: 'nameUg',
  },
  {
    title: '发布时间',
    key: 'publishTime',
    dataIndex: 'publishTime',
    valueType: 'date',
    fieldProps: {
      format: 'YYYY-MM-DD HH:mm',
    },
  },
  {
    title: '商品编号',
    key: 'goodNumber',
    dataIndex: 'goodNumber',
  },
  {
    title: '大箱装箱量',
    key: 'size',
    dataIndex: 'size',
  },
  {
    title: '中箱装箱量',
    key: 'name',
    dataIndex: 'name',
  },
  {
    title: '商品分类',
    key: 'categoryName',
    dataIndex: 'categoryName',
  },
  {
    title: '是否计入业绩',
    key: 'permit',
    dataIndex: 'permit',
    valueType: 'select',
    valueEnum: await getResult ( 'sys_global_state' ),
  },
  {
    title: '计量单位',
    key: 'measure',
    dataIndex: 'measure',
  },
  {
    title: '单位重量',
    key: 'weight',
    dataIndex: 'weight',
  },
  {
    title: '云仓库存',
    key: 'inventory',
    dataIndex: 'inventory',
  },
  {
    title: '库存数量',
    key: 'quantity',
    dataIndex: 'quantity',
  },
  {
    title: '市场价',
    key: 'marketPrice',
    dataIndex: 'marketPrice',
    valueType: 'money',
  },
  {
    title: '零售价',
    key: 'retailPrice',
    dataIndex: 'retailPrice',
    valueType: 'money',
  },
  ,
  {
    title: '备注',
    key: 'remark',
    dataIndex: 'remark',
    valueType: 'textarea',
  },
  {
    title: '维语备注',
    key: 'remarkUg',
    dataIndex: 'remarkUg',
    valueType: 'textarea',
  },
  {
    title: '多图片',
    key: 'images',
    dataIndex: 'images',
    span: 14,
    render: (dom, entity, index, action) => {
      if (dom !== undefined) {
        //   let images = entity.images
        let doms = dom.split ( ',' );
        let ret = [];
        for (let i = 0; i < doms.length; i++) {
          let item = doms[i];
          ret.push ( <Image src={item} width={100} height={100}></Image> );
        }
        console.log ( 'MOMMMMMMMMMMMMM', doms );
        return <div>{ret}</div>;
      }
    },
  },
  {
    title: '内容',
    key: 'content',
    dataIndex: 'content',
    render: (dom, entity, index, action) => {
      if (dom !== undefined) {
        let parse1 = parse ( dom );
        console.log ( parse1 );
        return <>{parse1}</>;
      }
    },
  },
];
const agentcolmuns = [
  {
    title: '代理类别',
    key: 'name',
    dataIndex: 'name',
  },
  {
    title: '代理类别',
    key: 'price',
    dataIndex: 'price',
    valueType: 'money',
  },
  {
    title: '代理类别',
    key: 'newPrice',
    dataIndex: 'newPrice',
    valueType: 'money',
  },
];
const addGoods: React.FC = () => {
  const [agents, setAgents] = useState<API.goodsAgentPrice[]> ();
  const [editorState, setEditorState] = useState<EditorState> ( BraftEditor.createEditorState ( null ) );
  const [goods, setGoods] = useState<API.Goods> ( initValue );

  const {query} = useLocation ();

  useMount ( () => {
    console.log ( 'paramsparamsparams', location );
    //getAttr2 ().then ( r  =>console.log )
    findByBackShowId ( query?.id ).then ( (res: API.BaseDataResult<API.Goods>) => {
      setGoods ( res.data );

      setEditorState ( ContentUtils.insertHTML ( editorState, res?.data?.content ) );
      //   formRef.current?.setFieldsValue(res?.data)
    } );
    findByGoodsAngent ( query?.id ).then ( (value) => {
      //  formRef.current?.setFieldsValue({agents:value.data})
      setAgents ( value.data );
    } );
  } );

  // @ts-ignore
  return (
    <div>
      <Card
        title={
          <PageHeader
            className="site-page-header"
            onBack={() => window.history.back ()}
            title={goods?.name}
            subTitle={goods?.nameUg}
          />
        }
        bordered={false}
      >
        <ProDescriptions dataSource={goods} bordered={true} columns={columns}></ProDescriptions>
        <ProTable
          pagination={false}
          toolBarRender={false}
          search={false}
          dataSource={agents}
          columns={agentcolmuns}
        ></ProTable>
      </Card>
    </div>
  );
};
export default addGoods;
